<template>
  <div :class="mineClass" @mouseup="clickHandle" :style="{ width: `${size}px`, height: `${size}px` }">
    <span v-if="opened">{{mines > 0 ? mines : ''}}</span>
    <mine-marker v-else-if="flag" type="flag"></mine-marker>
  </div>
</template>

<script>
import MineMarker from './MineMarker';

export default {
  name: 'mineItem',
  components: {
    MineMarker
  },
  props: {
    x: Number,
    y: Number,
    mines: Number,
    opened: {
      type: Boolean,
      default: false
    },
    flag: {
      type: Boolean,
      default: false
    },
    size: Number
  },
  computed: {
    isBomb() {
      return this.mines === -1;
    },
    mineClass() {
      return {
        'mine-item': true,
        opened: this.opened,
        zero: this.opened && this.mines === 0,
        bomb: this.opened && this.mines === -1
      };
    }
  },
  data() {
    return {};
  },
  methods: {
    clickHandle(e) {
      const btn = e.button;
      if (btn === 0) {
        this.$emit('bomb', this.x, this.y);
      } else if (btn === 2) {
        this.$emit('flag', this.x, this.y);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.mine-item {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  background-color: #eee;

  &.opened {
    background-color: #aaa;

    &.zero {
      background-color: #888;
      border-color: #aaa;
    }

    &.bomb {
      background-color: #f30;
    }
  }
}
</style>
